import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Button.stories';
import * as ButtonGroupStories from '../ButtonGroup/ButtonGroup.stories';

<Meta of={Stories} />

# Button

<Status variant="stable" />

Buttons allow users to initiate an action or command when clicked or tapped, which makes them a fundamental building block of our products.

<Story of={Stories.Base} />
<Props />

## When to use it

Use buttons when users need to either navigate through a product or perform a specific action.

## Usage guidelines

- **Do** always label a button in a clear and understandable way
- **Do** always think about the priority of the action to be taken when choosing a type of button
- **Do** position buttons in a predictable and coherent way throughout the product.
- **Do** combine different button types if you have more than one button in a specific screen
- **Do** use a loading state to provide feedback for our user when the action revolves around saving or
  inputting information, especially when it could take some seconds.

## Content guidelines

- **Do** always start the label with an actionable verb accompanied by a noun to provide enough context (example: "Confirm order").
  The only exceptions are the following common actions: "Save"; "Cancel"; and "Close".
- **Do** keep the label to a maximum of 3 words
- **Do not** capitalize all words of the label, just the first word or brand/product words (such as Apple Pay, for example)

## Component variations

### Variants

<Story of={Stories.Variants} />

The **primary button** should be used for the most important actions. There should always be just one primary button visible at a time on the screen.

The **secondary button** should be used for secondary actions to compliment a primary action, or when multiple actions of equal importance are required.

The **tertiary button** should be used for supportive actions, and can be paired with the primary or the secondary button.

### Destructive

<Story of={Stories.Destructive} />

The **destructive button** should be used for irreversible or other actions that require special attention from the user.

### Sizes

The button component supports 2 different sizes:

- Buttons are medium-sized (`m`) by default. Medium is suitable for most use cases and is considered the preferred size.
- The small size (`s`) may be used when space is limited and if the action is less significant.

<Story of={Stories.Sizes} />


### With Icons

- An **icon** provides additional context for the button, such as a “search” icon next to the label for a search field submission. It is rendered on the leading side of the label.
- A **navigation icon** hints that the button will perform an unexpected action, such as opening a dropdown or navigating the user to a new tab, so make sure you use them only when necessary. Navigation icons are not an alternative to leading icons and **should not** be used to provide additional context for the button!

<Story of={Stories.WithIcons} />

### Loading

When the button's action is inputting/saving information, you can indicate a loading state by setting the `isLoading` prop to `true` and passing a `loadingLabel` (for announcing the busy state to screen readers).

<Story of={Stories.Loading} />

## ButtonGroup

Used when users have two opposite actions to be taken in a certain step of a flow. It is generally used aligned to the right,
with a primary button for the expected action and a secondary button on its left.

<Story of={ButtonGroupStories.Base} />

- **Do** use the same verb tenses for both actions
